<template>
    <div>

        <h3>调寝申请页面</h3>


        <el-input v-model="query.xuehao" clearable placeholder="学号模糊查询" style="width: 200px;"></el-input>
        <el-button type="primary" @click="toAdd" v-if="user.role=='stu'">添加</el-button>

        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="xuehao"
                    label="学号">
            </el-table-column>
            <el-table-column
                    prop="bname1"
                    label="当前楼栋">
            </el-table-column>
            <el-table-column
                    prop="rname1"
                    label="当前房间">
            </el-table-column>
            <el-table-column
                    prop="currentNum"
                    label="当前床位">
            </el-table-column>
            <el-table-column
                    prop="bname2"
                    label="目标楼栋">
            </el-table-column>
            <el-table-column
                    prop="rname2"
                    label="目标房间">
            </el-table-column>
            <el-table-column
                    prop="destNum"
                    label="目标床位">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="applyTime"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="operateTime"
                    label="操作时间">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showDetail(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="toEdit(scope.row)" v-if="user.role=='stu'&&user.id==scope.row.sid">编辑</el-button>
                    <el-button v-if="user.role=='admin'" type="text" size="small" @click="shenhe(scope.row.id,'已通过')">通过</el-button>
                    <el-button v-if="user.role=='admin'" type="text" size="small" @click="shenhe(scope.row.id,'拒绝')">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>



        <el-dialog v-if="user.role=='stu'" :title="mode.title" :visible.sync="dialogFormVisible">

            <div>
                当前住宿信息：{{currentStuRoomInfo.bname}}-{{currentStuRoomInfo.rname}}-{{currentStuRoomInfo.num}}
            </div>
            <br>

            <el-form :model="form">

                <el-form-item label="楼栋" :label-width="formLabelWidth">
                    <el-select v-model="form.destBid" placeholder="请选择楼栋" @change="findRoomByBid">
                        <el-option :label="b.name" :value="b.id" v-for="b in blist"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="房间" :label-width="formLabelWidth">
                    <el-select v-model="form.destRoomId" placeholder="请选择房间">
                        <el-option :label="b.name" :value="b.id" v-for="b in rlist"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="床位" :label-width="formLabelWidth">
                    <el-input v-model="form.destNum" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRecord">确 定</el-button>
            </div>
        </el-dialog>



        <el-dialog title="调寝详情" :visible.sync="dialogFormVisible4Detail">

            <div>

                <p>姓名:{{detail.sname}}</p>
                <p>学号:{{detail.xuehao}}</p>
                <p>当前楼栋:{{detail.bname1}}</p>
                <p>当前房间:{{detail.rname1}}</p>
                <p>当前床位:{{detail.currentNum}}</p>
                <p>目标楼栋:{{detail.bname2}}</p>
                <p>目标房间:{{detail.rname2}}</p>
                <p>目标床位:{{detail.destNum}}</p>
                <p>申请状态:{{detail.state}}</p>
                <p>申请时间:{{detail.applyTime}}</p>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible4Detail=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "room_record",
        data(){
            return {
                user:{},
                tableData:[],
                total:0,
                query:{
                    page:1,
                    pageSize:2,
                    xuehao:""
                },
                dialogFormVisible: false,
                form: {
                    sid: '',
                    currentBid: '',
                    currentRid: '',
                    currentNum: '',
                    destBid: "",
                    destRoomId: "",
                    destNum: '',
                    state: '申请中'
                },
                formLabelWidth: '120px',
                mode:{
                    title:"",
                    url:""
                },
                currentStuRoomInfo:{},//当前人的房间信息
                blist:[],
                rlist:[],


                dialogFormVisible4Detail:false,
                detail:{},

            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }

            }
        },
        methods:{
            shenhe(id,state){
                let obj = {
                    id,
                    state
                };

                this.axios.post("/sushestu/room-record/changeState",obj).then(res=>{
                    if(res.data.code==1){
                        this.$message.success("操作成功")

                        this.initData();
                    }else{
                        this.$message.error(res.data.message)
                    }
                })

            },
            toEdit(row){
                this.mode = {
                    title:"修改申请记录",
                    url:"/sushestu/room-record/update"
                }


                this.form = JSON.parse(JSON.stringify(row));


                //查询要回显的房间下拉列表
                this.axios.post("/sushebase/room/findRoomsByBid?bid="+this.form.destBid).then(res=>{
                    this.rlist = res.data;
                    this.dialogFormVisible = true;
                })


            },
            showDetail(row){
                this.detail = row;
                this.dialogFormVisible4Detail = true

            },
            addRecord(){

                this.form.sid = this.user.id;
                this.form.currentBid = this.currentStuRoomInfo.bid;
                this.form.currentRid = this.currentStuRoomInfo.rid;
                this.form.currentNum = this.currentStuRoomInfo.num;


                this.axios.post(this.mode.url,this.form).then(res=>{
                    if(res.data.code==1){
                        this.$message.success("申请成功")
                        this.form = {
                            sid: '',
                            currentBid: '',
                            currentRid: '',
                            currentNum: '',
                            destBid: "",
                            destRoomId: "",
                            destNum: '',
                            state: '申请中'
                        }
                        this.dialogFormVisible = false;
                        this.initData();
                    }else{
                        this.$message.error(res.data.message)
                    }
                })

            },
            toAdd(){
                this.mode = {
                    title:"添加申请记录",
                    url:"/sushestu/room-record/add"
                }

                this.dialogFormVisible = true;

            },
            initStuCurrentRoonInfo(){//查询当前学生的住宿信息
                this.axios.post("/sushestu/stu-room/findBySid?sid="+this.user.id).then(res=>{
                    this.currentStuRoomInfo = res.data.data;
                })
            },
            findRoomByBid(bid){
                this.form.destRoomId = "";
                this.axios.post("/sushebase/room/findRoomsByBid?bid="+bid).then(res=>{
                    this.rlist = res.data;
                })
            },
            initBlist(){
                this.axios.post("/sushebase/building/findAll").then(res=>{
                    this.blist = res.data;
                })
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                this.axios.post(`/sushestu/room-record/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.data.records;
                    this.total = res.data.data.total;
                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })
            }
        },
        created(){

            let user = localStorage.getItem("sushe_user")
            this.user = JSON.parse(user);

            this.initStuCurrentRoonInfo();
            this.initBlist();
            this.initData()
        }
    }
</script>

<style scoped>

</style>
